<template>
  <lay-container
    fluid="true"
    style="padding: 10px">
    <lay-row :space="10">
      <lay-col :md="24">
        <lay-card>
          <lay-form
            style="margin-top: 20px"
            :model="queryParams"
            size="xs">
            <lay-row>
              <lay-col :md="16">
                <lay-form-item label="部门:">
                  <TreeSelect
                    class="w-[100%]"
                    v-model="searchAccount"
                    v-model:hasChildValue="queryParams.hasChildValue"
                    v-model:hasStopValue="queryParams.hasStopValue"
                    hasChild
                    :hasStop="true" />
                </lay-form-item>
              </lay-col>
              <lay-col :md="8">
                <lay-form-item label="工号:">
                  <lay-input v-model="searchEmail"></lay-input>
                </lay-form-item>
              </lay-col>
            </lay-row>
            <lay-row>
              <lay-col :md="8">
                <lay-form-item label="中文名:">
                  <lay-input v-model="searchEmail"></lay-input>
                </lay-form-item>
              </lay-col>
              <lay-col :md="8">
                <lay-form-item label="姓名:">
                  <lay-input v-model="searchEmail"></lay-input>
                </lay-form-item>
              </lay-col>
              <lay-col :md="8">
                <lay-form-item label="性别:">
                  <lay-select
                    v-model="queryParams.email"
                    style="width: 100%"
                    placeholder="请选择">
                    <lay-select-option
                      :value="1"
                      label="学习" />
                    <lay-select-option
                      :value="2"
                      label="编码" />
                    <lay-select-option
                      :value="3"
                      label="运动" />
                  </lay-select>
                </lay-form-item>
              </lay-col>
              <lay-col :md="8">
                <lay-form-item label="员工状态:">
                  <lay-select
                    v-model="queryParams.email"
                    style="width: 100%"
                    placeholder="请选择">
                    <lay-select-option
                      :value="1"
                      label="学习" />
                    <lay-select-option
                      :value="2"
                      label="编码" />
                    <lay-select-option
                      :value="3"
                      label="运动" />
                  </lay-select>
                </lay-form-item>
              </lay-col>
              <lay-col :md="8">
                <lay-form-item label="职位:">
                  <lay-select
                    v-model="queryParams.email"
                    style="width: 100%"
                    placeholder="请选择">
                    <lay-select-option
                      :value="1"
                      label="学习" />
                    <lay-select-option
                      :value="2"
                      label="编码" />
                    <lay-select-option
                      :value="3"
                      label="运动" />
                  </lay-select>
                </lay-form-item>
              </lay-col>
              <lay-col :md="8">
                <lay-form-item label="入职日期:">
                  <lay-date-picker
                    style="width: 100%"
                    v-model="queryParams.email"
                    allowClear></lay-date-picker>
                </lay-form-item>
              </lay-col>
              <lay-col :md="8">
                <lay-form-item label="离职日期:">
                  <lay-date-picker
                    style="width: 100%"
                    v-model="queryParams.email"
                    allowClear></lay-date-picker>
                </lay-form-item>
              </lay-col>

              <lay-col :md="8">
                <lay-form-item label="日期区间:">
                  <a-range-picker
                    v-model="queryParams.timeRange"
                    style="width: 100%" />
                </lay-form-item>
              </lay-col>
              <lay-col :md="8">
                <lay-form-item label-width="0">
                  <lay-button
                    type="primary"
                    @click="toSearch"
                    >查询</lay-button
                  >
                  <lay-button @click="toReset">重置</lay-button>
                </lay-form-item>
              </lay-col>
            </lay-row>
          </lay-form>
        </lay-card>
      </lay-col>
      <lay-col :md="24">
        <lay-card>
          <lay-table
            :page="page"
            :columns="columns"
            :dataSource="dataSource"
            :default-toolbar="defaultToolbar"
            v-model:selectedKeys="selectedKeys"
            size="sm"
            @row="rowClick"
            @change="change">
            <template v-slot:toolbar>
              <lay-dropdown
                updateAtScroll
                size="xs">
                <lay-button
                  size="xs"
                  suffix-icon="layui-icon-triangle-d"
                  >操作</lay-button
                >
                <template #content>
                  <lay-dropdown-menu>
                    <lay-dropdown-menu-item @click="handleLock"
                      >锁定</lay-dropdown-menu-item
                    >
                    <lay-dropdown-menu-item @click="handleDelLock"
                      >删除锁定</lay-dropdown-menu-item
                    >
                    <lay-dropdown-menu-item @click="hanldeExport"
                      >导出快捷查询名单</lay-dropdown-menu-item
                    >
                  </lay-dropdown-menu>
                </template>
              </lay-dropdown>
              <lay-dropdown
                updateAtScroll
                size="xs">
                <lay-button
                  size="xs"
                  suffix-icon="layui-icon-triangle-d"
                  >考勤</lay-button
                >
                <template #content>
                  <lay-dropdown-menu>
                    <lay-dropdown-menu-item @click="handleOpenSignLogs"
                      >考勤卡</lay-dropdown-menu-item
                    >
                    <lay-dropdown-menu-item @click="handleAddSignLogs"
                      >添加打卡</lay-dropdown-menu-item
                    >
                    <lay-dropdown-menu-item @click="handleDelSignLogs"
                      >删除打卡</lay-dropdown-menu-item
                    >
                    <lay-dropdown-menu-item @click="handleExportSignTable"
                      >导出考勤卡数据</lay-dropdown-menu-item
                    >
                  </lay-dropdown-menu>
                </template>
              </lay-dropdown>
              <lay-dropdown
                updateAtScroll
                size="xs">
                <lay-button
                  size="xs"
                  suffix-icon="layui-icon-triangle-d"
                  >排班</lay-button
                >
                <template #content>
                  <lay-dropdown-menu>
                    <lay-dropdown-menu-item @click="handleToUserScheduling"
                      >员工排班表</lay-dropdown-menu-item
                    >
                  </lay-dropdown-menu>
                </template>
              </lay-dropdown>
              <lay-dropdown
                updateAtScroll
                size="xs">
                <lay-button
                  size="xs"
                  suffix-icon="layui-icon-triangle-d"
                  >请假</lay-button
                >
                <template #content>
                  <lay-dropdown-menu>
                    <lay-dropdown-menu-item @click="handleLeave"
                      >请假</lay-dropdown-menu-item
                    >
                    <lay-dropdown-menu-item @click="handleBatchLeave"
                      >批量请假</lay-dropdown-menu-item
                    >
                    <lay-dropdown-menu-item @click="handleLeaveExport"
                      >请假数据导入</lay-dropdown-menu-item
                    >
                  </lay-dropdown-menu>
                </template>
              </lay-dropdown>
              <lay-dropdown
                updateAtScroll
                size="xs">
                <lay-button
                  size="xs"
                  suffix-icon="layui-icon-triangle-d"
                  >加班</lay-button
                >
                <template #content>
                  <lay-dropdown-menu>
                    <lay-dropdown-menu-item @click="handleImportOverTime"
                      >加班数据导入</lay-dropdown-menu-item
                    >
                  </lay-dropdown-menu>
                </template>
              </lay-dropdown>
            </template>
            <template v-slot:username="{ data }">
              {{ data.username }}
            </template>
            <template v-slot:password="{ data }">
              {{ data.password }}
            </template>
            <template v-slot:operator="{}">
              <lay-button
                size="xs"
                type="primary"
                >修改</lay-button
              >
              <lay-button size="xs">删除</lay-button>
            </template>
            <template v-slot:footer>
              {{ selectedKeys }}
            </template>
          </lay-table>
        </lay-card>
      </lay-col>
    </lay-row>

    <a-modal
      v-model:visible="visible"
      @ok="handleOk"
      @cancel="handleCancel">
      <template #title> 添加打卡 </template>
      <a-form
        :model="form"
        ref="formRef"
        :style="{ width: '100%' }">
        <a-form-item
          field="name"
          label="日期">
          <a-select
            v-model="form.date"
            placeholder="Please select ...">
            <!-- <a-option v-for="(item,index) in signOptions" :key="index" >{{ item }}</a-option> -->
            <a-option
              v-for="item of signOptions"
              :value="item"
              :label="item"
              :key="item" />
          </a-select>
        </a-form-item>
        <a-form-item
          field="post"
          label="打卡类型">
          <a-radio-group
            v-model="form.signType"
            :options="plainOptions" />
        </a-form-item>
        <a-form-item
          field="post"
          label="补卡类型">
          <a-select
            v-model="form.signTypes"
            placeholder="Please select ...">
            <a-option>上班忘带卡</a-option>
            <a-option>忘记打卡</a-option>
          </a-select>
        </a-form-item>
        <a-form-item
          field="isRead"
          label="打卡时间">
          <a-select
            v-model="form.signTime"
            placeholder="Please select ...">
            <a-option
              v-for="item of signTime"
              :value="item"
              :label="item"
              :key="item" />
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal
      v-model:visible="open"
      @ok="handleOk"
      @cancel="handleCancel">
      <template #title> {{ openTitle }} </template>
      <a-form
        :model="form"
        ref="formRef"
        :style="{ width: '100%' }">
        <a-form-item
          field="name"
          label="姓名/工号">
          <a-select
            v-model="form.date"
            placeholder="Please select ...">
            <!-- <a-option v-for="(item,index) in signOptions" :key="index" >{{ item }}</a-option> -->
            <a-option
              v-for="item of signOptions"
              :value="item"
              :label="item"
              :key="item" />
          </a-select>
          <a-select
            v-model="form.date"
            placeholder="Please select ...">
            <!-- <a-option v-for="(item,index) in signOptions" :key="index" >{{ item }}</a-option> -->
            <a-option
              v-for="item of signOptions"
              :value="item"
              :label="item"
              :key="item" />
          </a-select>
        </a-form-item>
        <a-form-item
          field="post"
          label="请假类型">
          <a-radio-group
            v-model="form.signType"
            :options="plainOptions" />
        </a-form-item>
        <a-form-item
          field="post"
          label="开始日期">
          <a-date-picker style="width: 200px" />
        </a-form-item>
        <a-form-item
          field="post"
          label="结束日期">
          <a-date-picker style="width: 200px" />
        </a-form-item>
        <a-form-item
          field="isRead"
          label="开始时间">
          <a-select
            v-model="form.startTime"
            placeholder="Please select ...">
            <a-option
              v-for="item of signTime"
              :value="item"
              :label="item"
              :key="item" />
          </a-select>
        </a-form-item>
        <a-form-item
          field="isRead"
          label="结束时间">
          <a-select
            v-model="form.endTime"
            placeholder="Please select ...">
            <a-option
              v-for="item of signTime"
              :value="item"
              :label="item"
              :key="item" />
          </a-select>
        </a-form-item>
        <a-form-item
          field="isRead"
          label="时数">
          <a-input allow-clear />
        </a-form-item>
        <a-form-item
          field="isRead"
          label="重复">
          <a-checkbox value="1">Option 1</a-checkbox>
        </a-form-item>
        <a-form-item
          field="isRead"
          label="次数">
          <a-input-number
            :min="0"
            placeholder="Please enter something"
            allow-clear>
            <template #plus> + </template>
            <template #minus> - </template>
          </a-input-number>
        </a-form-item>
        <a-form-item
          field="isRead"
          label="原因">
          <a-select
            v-model="form.date"
            placeholder="Please select ...">
            <a-option
              v-for="(item, index) in signOptions"
              :key="index"
              >{{ item }}</a-option
            >
            <a-option
              value="01"
              label="零星事假" />
            <a-option
              value="02"
              label="年休假" />
            <a-option
              value="03"
              label="因公外出" />
            <a-option
              value="04"
              label="事假" />
            <a-option
              value="05"
              label="调休假" />
            <a-option
              value="06"
              label="育儿假" />
            <a-option
              value="99"
              label="独生子女护理假" />
            <a-option
              value="99"
              label="婚假" />
            <a-option
              value="99"
              label="丧假" />
            <a-option
              value="99"
              label="产假" />
            <a-option
              value="99"
              label="陪产假" />
            <a-option
              value="99"
              label="哺乳假" />
          </a-select>
        </a-form-item>
        <a-form-item
          field="isRead"
          label="说明">
          <a-input allow-clear />
        </a-form-item>
      </a-form>
    </a-modal>
  </lay-container>
</template>

<script setup>
import { ref, watch, toRefs, reactive, onMounted } from 'vue';
import { layer } from '@layui/layer-vue';
import dayjs from 'dayjs';
import router from '@/router';

const selectedKeys = ref([]);
const checkbox = ref(true);
const defaultToolbar = ref(true);
const visible = ref(false);
const open = ref(false);

const data = reactive({
  form: { date: '', signType: '' },
  plainOptions: [
    { label: '上班卡', value: '1' },
    { label: '下班卡', value: '2' },
  ],
  signOptions: [],
  signTime: [],
  openTitle: '请假',
});
const { form, plainOptions, signOptions, signTime, openTitle } = toRefs(data);

const queryParams = ref({
  timeRange: [
    dayjs().startOf('week').add(1, 'day').format('YYYY-MM-DD'),
    dayjs().endOf('week').add(1, 'day').format('YYYY-MM-DD'),
  ],
});

const page = ref({ total: 100, limit: 10, current: 2 });

const handleAddSignLogs = () => {
  if (!selectedKeys.value.length) {
    layer.msg('必须先选择人员', { time: 1000 });
    return;
  }
  let timeOptions = [];
  let hhmmOptions = [];
  let numStep = 0;
  const today = dayjs().format('YYYY-MM-DD');

  const [startTime, endTime] = queryParams.value.timeRange;
  const range = dayjs(endTime).diff(startTime, 'day');
  for (let i = 0; i < range + 1; i++) {
    timeOptions.push(dayjs(startTime).add(i, 'day').format('YYYY-MM-DD'));
  }
  for (let i = 0; i < 95; i++) {
    numStep += 15;
    hhmmOptions.push(dayjs(today).minute(numStep).format('HH:mm'));
  }

  signOptions.value = timeOptions;
  signTime.value = hhmmOptions;
  form.value.date = timeOptions[0];
  visible.value = true;
};

const handleCancel = () => {
  visible.value = false;
};

const columns = [
  { title: '选项', width: '55px', type: 'checkbox', fixed: 'left' },
  {
    title: '部门',
    width: '155px',
    fixed: 'left',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '工号',
    width: '80px',
    key: 'name',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '姓名',
    width: '180px',
    key: 'status',
    customSlot: 'status',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '工资编号',
    width: '120px',
    key: 'email',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '性别',
    width: '80px',
    key: 'sex',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '员工状态',
    width: '80px',
    key: 'age',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '职位',
    width: '120px',
    key: 'city',
    sort: 'desc',
    ellipsisTooltip: true,
  },
  {
    title: '详细',
    width: '60px',
    customSlot: 'operator',
    key: 'operator',
    fixed: 'right',
    ignoreExport: true,
  },
];

const dataSource = [
  {
    id: '1',
    username: 'shana',
    password: '夏娜',
    remark: '花开堪折直须折,莫待无花空折枝',
    age: '22',
  },
  {
    id: '2',
    username: 'shana',
    password: '夏娜',
    remark: '花开堪折直须折,莫待无花空折枝',
    age: '22',
  },
  {
    id: '3',
    username: 'shana',
    password: '夏娜',
    remark: '花开堪折直须折,莫待无花空折枝',
    age: '22',
  },
  {
    id: '4',
    username: 'shana',
    password: '夏娜',
    remark: '花开堪折直须折,莫待无花空折枝',
    age: '22',
  },
  {
    id: '5',
    username: 'shana',
    password: '夏娜',
    remark: '花开堪折直须折,莫待无花空折枝',
    age: '22',
  },
  {
    id: '6',
    username: 'shana',
    password: '夏娜',
    remark: '花开堪折直须折,莫待无花空折枝',
    age: '22',
  },
  {
    id: '7',
    username: 'shana',
    password: '夏娜',
    remark: '花开堪折直须折,莫待无花空折枝',
    age: '22',
  },
  {
    id: '8',
    username: 'shana',
    password: '夏娜',
    remark: '花开堪折直须折,莫待无花空折枝',
    age: '22',
  },
  {
    id: '9',
    username: 'shana',
    password: '夏娜',
    remark: '花开堪折直须折,莫待无花空折枝',
    age: '22',
  },
  {
    id: '10',
    username: 'shana',
    password: '夏娜',
    remark: '花开堪折直须折,莫待无花空折枝',
    age: '22',
  },
  {
    id: '11',
    username: 'shana',
    password: '夏娜',
    remark: '花开堪折直须折,莫待无花空折枝',
    age: '22',
  },
];

const rowClick = function (data) {};

const rowDoubleClick = function (data) {};

const change = function ({ current, limit }) {
  layer.msg('current:' + current + ' limit:' + limit);
};
function toSearch() {
  layer.load(2, { time: 3000 });
}
const searchAccount = ref('');
const searchEmail = ref('');
function toReset() {
  searchAccount.value = '';
  searchEmail.value = '';
}

const handleToUserScheduling = () => {
  if (!selectedKeys.value.length) {
    layer.msg('必须先选择人员', { time: 1000 });
    return;
  }

  router.push({ path: '/attendance/scheduling' });
};

const handleLock = () => {
  console.log(selectedKeys.value);
  if (!selectedKeys.value.length) {
    layer.msg('必须先选择人员', { time: 1000 });
    return;
  }
};
const handleDelLock = () => {
  if (!selectedKeys.value.length) {
    layer.msg('必须先选择人员', { time: 1000 });
    return;
  }
};
const hanldeExport = () => {};
const handleOpenSignLogs = () => {
  if (!selectedKeys.value.length) {
    layer.msg('必须先选择人员', { time: 1000 });
    return;
  }
  router.push();
};

const handleDelSignLogs = () => {
  if (!selectedKeys.value.length) {
    layer.msg('必须先选择人员', { time: 1000 });
    return;
  }
};
const handleExportSignTable = () => {};
const handleLeave = () => {
  open.value = true;
  openTitle.value = '请假';
};
const handleBatchLeave = () => {
  open.value = true;
  openTitle.value = '批量请假';
};
const handleLeaveExport = () => {};
const handleImportOverTime = () => {};

onMounted(() => {
  let hhmmOptions = [];
  let numStep = 0;
  const today = dayjs().format('YYYY-MM-DD');
  for (let i = 0; i < 95; i++) {
    numStep += 15;
    hhmmOptions.push(dayjs(today).minute(numStep).format('HH:mm'));
  }
  signTime.value = hhmmOptions;
});

// return {
//   columns,
//   dataSource,
//   selectedKeys,
//   checkbox,
//   defaultToolbar,
//   page,
//   rowClick,
//   rowDoubleClick,
//   change,
//   toReset,
//   toSearch,
//   searchAccount,
//   searchEmail
// }
</script>
